<!--业绩中心-->
<template>
    <div class="resultCenter">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="业绩中心"
                    left-arrow
                   @click-left="toBack">
            </van-nav-bar>
        </div>
        <div class="padTop"></div>
        <div class="resultHead d-flex-pk bg-white-pk text-center-pk">
            <div>
                <div class="text-light-pk font-size-13-pk">累计销售(元)</div>
                <div class="text-red-pk money">{{sales}}</div>
                <div class="text-black-pk font-size-13-pk">查看明细</div>
            </div>
            <div>
                <div class="text-light-pk font-size-13-pk">总收益(元)</div>
                <div class="text-red-pk money">{{rewardMoney}}</div>
                <div class="text-black-pk font-size-13-pk">查看明细</div>
            </div>
        </div>
        <div class="subordinate d-flex-pk text-center-pk">
            <div class="bg-white-pk myTeam " @click="myTeam">
                <img src="../../assets/images/subordinate.png" alt="img">
                <div>我的下级</div>
            </div>
            <div class="bg-white-pk myCode" @click="myQRcode">
                <img src="../../assets/images/QRcode.png" alt="img">
                <div>
                    我的二维码
                </div>
            </div>
        </div>
        <div class="myQRcode text-center-pk" >
            <van-popup v-model="showQRcode" :style="{ height: '250px' }">
              <div class="bg-white-pk imgItem">
                  <!--<img src="../../assets/images/QRcode.png" alt="二维码">-->

              </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
    //import ComQR from "../../components/com-qrcode/index";
    export default {
        name:"resultCenter",
        title:"业绩中心",
        components: {},
        data(){
            return{
                userInfo:{},
                rewardMoney:"",
                sales:"",
                showQRcode:false,
                qrcodeText:'',
            }
        },
        created() {
            this.getUserInfo();
            this.getSales();

        },
        methods:{
            toBack(){
                this.$router.push({
                    name:"personalCenter"
                })
            },
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result) {
                        this.userInfo = result;
                    }
                })
            },
            /**
             * 获取销售业绩
             */
            getSales(){
                this.$api.getSales().then(promise => {
                    let result=this.$resData(promise)
                    if(result){
                        this.rewardMoney=result.rewardMoney;
                        this.sales=result.sales;
                    }
                });
            },
            //我的下级
            myTeam(){
                this.$router.push({
                    name:"groupChildren"
                })
            },
            //我的二维码
            myQRcode(){
                let that = this;
                try {
                    that.qrcodeText = this.userInfo.registerUrl + '&inviteNum='+this.userInfo.inviteNumber;
                    //that.showQRcode=true;
                }catch (e) {
                    return false;
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .resultCenter{
        line-height: 1.8;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .padTop{
            padding-top: 48px;
        }
        .resultHead{
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
            padding: 10px 35px;
            justify-content: space-between;
            margin:10px;
            .money{
                font-size: 21px;
            }
        }
        .subordinate{
            margin-top: 20px;
            padding: 0 10px;
            align-items: center;
            .myTeam{
                width: 105px;
                height: 105px;

            }
            .myCode{
                width: 105px;
                height: 105px;
                margin-left: 10px;
            }
            img{
                margin-top: 15px;
                width: 41px;
                height: 41px;
            }
        }
        .myQRcode{
            .van-popup {
                background: none;
            }
            .van-popup--center {

            }
            .imgItem{
                padding: 10px;
                width: 200px;
            }
            .cancelBtn{
                padding-top: 20px;
            }
        }
    }

</style>
